﻿
var Icon = antd.Icon;
var Table = antd.Table;
var Modal = antd.Modal;
var Button = antd.Button;
var Form = antd.Form;
var Input = antd.Input;
var Select = antd.Select;
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;


const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render(text) {
        return <a href="#">{text}</a>;
    }
}, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
}, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
}, {
    title: '操作',
    key: 'operation',
    render(text, record) {
        return (
          <span>
            <a href="#">操作一{record.name}</a>
            <span className="ant-divider"></span>
            <a href="#">操作二</a>
            <span className="ant-divider"></span>
            <a href="#" className="ant-dropdown-link">
                更多 <Icon type="down" />
            </a>
          </span>
      );
    }
}];
const datasource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
}, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
}, {
    key: '3',
    name: '李大嘴',
    age: 32,
    address: '西湖区湖底公园1号'
}];
function handleSelectChange(value) {
    console.log(`selected ${value}`);
}
var Homeindex = React.createClass({
    getInitialState() {
        return {
            loading: false,
            visible: false
        };
    },
    showModal() {
        this.setState({
            visible: true
        });
    },
    handleOk() {

        this.setState({ loading: true });
        setTimeout(() => {
            this.setState({ loading: false, visible: false });
        }, 3000);
    },
    handleCancel() {
        this.setState({ visible: false });
    },
    render: function () {
        return (
          <div className="commentBox">
           <div>
        <Button type="primary" onClick={this.showModal}>
            新增
        </Button>
        <Modal ref="modal"
               visible={this.state.visible}
               title="新增" onOk={this.handleOk} onCancel={this.handleCancel}
               footer={[
            <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
              提 交
            </Button>
          ]}>
         <Form horizontal form={this.props.form}>
    <FormItem id="control-input"
              label="输入框："
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}>
      <Input id="control-input" placeholder="Please enter..." />
    </FormItem>

    <FormItem id="control-textarea"
              label="文本域："
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}>
      <Input type="textarea" id="control-textarea" rows="3" />
    </FormItem>

    <FormItem id="select"
              label="Select 选择器："
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}>
      <Select id="select" size="small" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
        <Option value="disabled" disabled>disabled</Option>
          < Option value="yiminghe">yiminghe</Option>
      </Select>
    </FormItem>

    <FormItem label="Checkbox 多选框："
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}>
        <label className="ant-checkbox-vertical">
          <Checkbox />选项一
        </label>
        <label className="ant-checkbox-vertical">
          <Checkbox />选项二
        </label>
        <label className="ant-checkbox-vertical">
          <Checkbox disabled />选项三（不可选）
        </label>
    </FormItem>

    <FormItem label="Checkbox 多选框："
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}>
        <label className="ant-checkbox-inline">
          <Checkbox />选项一
        </label>
        <label className="ant-checkbox-inline">
          <Checkbox />选项二
        </label>
        <label className="ant-checkbox-inline">
          <Checkbox />选项三
        </label>
    </FormItem>

    <FormItem label="Radio 单选框："
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}>
        <RadioGroup value="b">
          <Radio value="a">A</Radio>
          <Radio value="b">B</Radio>
          <Radio value="c">C</Radio>
          <Radio value="d">D</Radio>
        </RadioGroup>
    </FormItem>
         </Form>
        </Modal>
           </div>
            <Table dataSource={datasource} columns={columns} />
              <br />
          </div>
        );
    }
});
